<!-- 首页 -->
<template>
  <div class="box">
    <div class="title">
      <!-- <img src="../../assets/top_bj.png" class="titleBg" /> -->
      <div class="titleLeft"></div>
      <div class="titleMain">同业客户可视化大屏</div>
      <div class="titleRight">
        <div class="timeBox">
          <img class="timeIcon" src="../../assets/time.png" />
        </div>
        <div class="timeNum">{{ date }}</div>
      </div>
    </div>
    <div class="main">
      <div class="left_content">
        <div style="flex: 1">
          <div class="lefttitle" style="margin-top: 10px">
            <div class="left">
              <i><i class="blue"></i><i class="blue-transparent"></i></i>
              <span>区域客户数TOP20</span>
            </div>
            <div class="right"></div>
          </div>
          <el-table :data="tableData1" class="tableBoxChild" height="200px">
            <el-table-column label="序号" align="center" type="index">
            </el-table-column>
            <el-table-column prop="regionCode" label="省/市" align="center">
            </el-table-column>
            <el-table-column prop="custNum" label="同业客户数量" align="center">
            </el-table-column>
          </el-table>
        </div>
        <div style="flex: 1">
          <div class="lefttitle">
            <div class="left">
              <i><i class="blue"></i><i class="blue-transparent"></i></i>
              <span>客户授信TOP20</span>
            </div>
            <div class="right"></div>
          </div>
          <el-table :data="tableData2" class="tableBoxChild" height="200px">
            <el-table-column label="序号" align="center" type="index">
            </el-table-column>
            <el-table-column prop="custName" label="客户名称" align="center">
            </el-table-column>
            <el-table-column
              prop="creditTotalLimit"
              label="授信总额(亿)"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="creditTotalLimitOccupied"
              label="授信占用(亿)"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
        <div style="flex: 1">
          <div class="lefttitle">
            <div class="left">
              <i><i class="blue"></i><i class="blue-transparent"></i></i>
              <span>客户类型分布</span>
            </div>
            <div class="right"></div>
          </div>
          <div id="customType"></div>
        </div>
      </div>
      <div class="content">
        <div class="map" id="city"></div>
        <div class="line_chart">
          <div class="module1">
            <div class="module1_title">
              <div class="left">
                <i><i class="blue"></i><i class="blue-transparent"></i></i>
                <span>业务品种交易量</span>
              </div>
              <div class="right"></div>
            </div>
            <div id="chart1"></div>
          </div>
          <div class="module1">
            <div class="module1_title">
              <div class="left">
                <i><i class="blue"></i><i class="blue-transparent"></i></i>
                <span>业务品种交易频次</span>
              </div>
              <div class="right"></div>
            </div>
            <div id="chart2"></div>
          </div>
        </div>
      </div>
      <div class="right_echarts">
        <chartRight />
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import moment from 'moment';
import {
  getCustNumByRegion,
  keyEvent,
  queryBondNum,
  titleIndicators,
  queryTradeAmount,
  targetValue,
  riskDistribution,
  getContent,
  baseInfo,
  getQuantity,
  getFrequencies,
  getCreditTop,
  getEntityByProperty,
  batchDate,
} from '@/api/homePage/index.js';
import chartRight from './component/chartRight.vue';
import { chinaList } from '@/utils/chinaMain.js';
import { temp } from '@/utils/temp.js';
import tradeInformationVue from '../customerManagement/customerView/components/tradeInformation.vue';
export default {
  components: {
    chartRight,
  },
  data() {
    return {
      date: '',
      tableData1: [],
      tableData2: [],
      MainList: [],
      today: '',
      chart1Series: [],
      chart2Series: [],
      chartType: [],
      chartDate: [],
      chartColor: [
        '170, 179, 193',
        '20, 144, 246',
        '226, 102, 60',
        '249, 223, 189',
        '247, 179, 53',
        '174, 239, 246',
      ],
      chartLineColor: [
        '#AAB3C1',
        '#1490F6',
        '#E2663C',
        '#F9DFBD',
        '#F7B335',
        '#AEEFF6',
      ],
    };
  },
  async mounted() {
    this.getDateSection();
    this.getCustNumByRegion();
    // 创建一个日期对象
    const res = await batchDate();
    this.data = moment(res.data.data).format('YYYY-MM-DD');
    await this.getCustNumByRegion();
    this.drawcustomType();
    // const res = await baseInfo({ CustomerId: 1 });
    // console.log(res, 990);
    await this.getQuantityData();
    await this.getFrequenciesData();
    await this.getCreditTop();
  },
  methods: {
    async getCustNumByRegion() {
      let res = await getCustNumByRegion({ isLimit: true });
      for (let i = 0; i < res.data.length; i++) {
        let geoCoord = temp[res.data[i].regionCode];
        if (geoCoord) {
          this.MainList.push({
            name: res.data[i].regionCode,
            value: geoCoord.concat(res.data[i].custNum),
          });
        }
      }
      this.tableData1 = res.data;
      // const ceshi = res.data.features.map((v) => {
      //   return { name: v.properties.name, value: v.properties.center };
      // });
      await this.cityFn();
      console.log(this.MainList, '222');
    },
    convertData(data) {
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push(geoCoord.concat(data[i].value));
        }
      }
      return res;
    },
    getCreditTop() {
      getCreditTop().then((res) => {
        this.tableData2 = res.data;
      });
    },
    drawcustomType() {
      let datas = [];
      getEntityByProperty().then((res) => {
        res.data.map((item) => {
          datas.push({
            name: item.entityProperty,
            value: item.entityNum,
          });
        });
        let myChart = this.$echarts.init(document.getElementById('customType'));
        let option;
        option = {
          color: [
            '#FFCD41',
            '#47EAFD',
            '#2FA3FF',
            '#EAEDFE',
            '#44FF98',
            '#FFCD41',
            '#47EAFD',
            '#2FA3FF',
            '#EAEDFE',
            '#44FF98',
            '#FFCD41',
            '#47EAFD',
            '#2FA3FF',
            '#EAEDFE',
            '#44FF98',
          ],
          legend: {
            itemHeight: 9,
            itemWidth: 9,
            icon: 'circle',
            orient: 'vertical',
            top: 'center',
            right: '5%',
            textStyle: {
              align: 'left',
              color: '#fff',
              verticalAlign: 'middle',
              rich: {
                name: {
                  width: 80,
                  fontSize: 12,
                },
                value: {
                  width: 20,
                  align: 'right',
                  fontFamily: 'Medium',
                  fontSize: 16,
                },
                rate: {
                  width: 10,
                  align: 'right',
                  fontSize: 16,
                },
              },
            },
            data: datas,
            formatter: (name) => {
              if (datas.length) {
                const item = datas.filter((item) => item.name === name)[0];
                return `{name|${name}}`;
              }
            },
          },
          tooltip: {
            trigger: 'item',
            formatter: '{d}%',
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '80%'],
              center: ['35%', '50%'],
              roseType: 'radius',
              label: {
                show: false,
                formatter: '{d}%',
              },
              labelLine: {
                show: false,
                length: 1,
                length2: 20,
              },
              data: datas.slice(0, 5),
              itemStyle: {
                // 为每一块设置颜色
                normal: {
                  color: function (params) {
                    // 自定义颜色
                    // var colorList = [
                    //   '#fff',
                    //   '#08b0f0',
                    //   '#ffff03',
                    //   '#f4b183',
                    //   '#a9d18e',
                    // ];
                    // return colorList[params.dataIndex];
                    var colorList = [
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(255, 205, 65, 1)', // 颜色渐变
                        },
                        {
                          offset: 1,
                          color: 'rgba(255, 205, 65, .5)', // 颜色渐变
                        },
                      ]),
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(71, 234, 253, 1)', // 颜色渐变
                        },
                        {
                          offset: 1,
                          color: 'rgba(71, 234, 253, .5)', // 颜色渐变
                        },
                      ]),
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(47, 163, 255, 1)', // 颜色渐变
                        },
                        {
                          offset: 1,
                          color: 'rgba(47, 163, 255, .5)', // 颜色渐变
                        },
                      ]),
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(234, 237, 254, 1)', // 颜色渐变
                        },
                        {
                          offset: 1,
                          color: 'rgba(234, 237, 254, .5)', // 颜色渐变
                        },
                      ]),
                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(68, 255, 152, 1)', // 颜色渐变
                        },
                        {
                          offset: 1,
                          color: 'rgba(68, 255, 152, .5)', // 颜色渐变
                        },
                      ]),
                    ];
                    return colorList[params.dataIndex % colorList.length];
                  },
                },
              },
            },
            {
              silent: true,
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '20%'],
              center: ['35%', '50%'],
              label: {
                position: 'inner',
                fontSize: 14,
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 0,
                  itemStyle: {
                    color: '#33384C',
                  },
                },
              ],
            },
            {
              silent: true,
              type: 'pie',
              selectedMode: 'single',
              radius: ['25%', '35%'],
              center: ['35%', '50%'],
              label: {
                position: 'inner',
                fontSize: 14,
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: 0,
                  itemStyle: {
                    color: '#33384C',
                  },
                },
              ],
            },
          ],
        };
        myChart.clear();
        myChart.setOption(option);
      });
    },
    async cityFn() {
      let myChart2 = this.$echarts.init(document.getElementById('city'));
      this.$echarts.registerMap('china', chinaList);

      myChart2.setOption({
        grid: {
          left: '5%',
          right: '10%',
          top: '20%',
          bottom: '10%',
          containLabel: true,
        },
        // tooltip: {
        //   show: true,
        //   trigger: 'item', // 触发类型
        //   formatter: function (params) {
        //     // 提示框内容格式化
        //     // params 是包含当前点信息的对象

        //     return 1222;
        //   },
        // },
        geo: {
          map: 'china',
          aspectScale: 1.2,
          center: [104.29, 20],

          tooltip: {
            trigger: 'axis',
            show: true,
            axisPointer: {
              type: 'shadow',
            },
          },
          zoom: 1.7,
          itemStyle: {
            borderColor: '#eee',
            shadowColor: '#76b1ff',
            shadowBlur: 10,
            borderWidth: 1.5,
            normal: {
              areaColor: 'rgba(25,72,188)',
              borderWidth: 1, //设置外层边框
              borderColor: '#1CC7F2',
              shadowBlur: 2,
              shadowColor: '#76b1ff',
              shadowOffsetY: 3,
            },

            emphasis: {
              label: {
                show: true,
              },
              areaColor: 'rgba(111,184,223)',
              borderWidth: 2, //设置外层边框
              borderColor: '#1CC7F2',
              shadowBlur: 6,
              shadowColor: '#76b1ff',
              shadowOffsetY: 3,
            },
            areaColor: '#76b1ff',
          },
          top: '30%',
          emphasis: {
            itemStyle: {
              areaColor: '#409EFF',
              borderWidth: 0,
            },
          },
          // bottom: 0,
          // top: 100, // 上边距
          // right: '0%', // 右边距
          // bottom: '10%', // 底边距
          zoom: 1.2,
        },

        tooltip: {
          trigger: 'axis',
          show: true,
          axisPointer: {
            type: 'shadow',
          },
        },
        visualMap: {
          show: true,
          color: ['#ff4601', '#fffc00', '#87cffa'],
          min: 1,
          max: 120,
          bottom: '20px',
          left: '50px',
        },
        series: [
          {
            name: 'AQI',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: this.MainList,
            bottom: '20px',
            symbolSize: 0,
            left: '50px',
          },
        ],
      });
    },
    chart1Init() {
      let chartDom = document.getElementById('chart1');
      let myChart = this.$echarts.init(chartDom);
      let option;
      option = {
        color: this.chartLineColor,
        legend: {
          data: this.chartType,
          textStyle: {
            color: '#fff',
          },
          icon: 'rect',
          itemWidth: 10,
          itemHeight: 10,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '23%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              // 坐标轴刻度
              show: false,
            },
            //     axisLabel: {
            //     fontSize: 10 // 设置文字大小为16
            // },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff', // 修改为需要的颜色,
                width: 2,
              },
            },
            data: this.chartDate,
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '(万元)',
            nameTextStyle: {
              color: '#fff',
              // nameLocation: "start",
              align: 'right',
            },
            // min: 5000,
            // interval: 5000,
            axisLine: {
              show: false,
            },
            axisTick: {
              // 坐标轴刻度
              show: false,
            },
            splitLine: {
              // 坐标轴在 grid 区域中的分隔线
              lineStyle: {
                // 分隔线
                type: 'dashed', // 线的类型
                color: '#3C434F', // 分隔线颜色
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#E3F1FD',
              },
            },
          },
        ],
        series: this.chart1Series,
      };
      myChart.setOption(option);
    },
    chart2Init() {
      let chartDom = document.getElementById('chart2');
      console.log(this.chartType, 'this.chartType');
      let myChart = this.$echarts.init(chartDom);
      let option;
      option = {
        color: this.chartLineColor,
        legend: {
          data: this.chartType,
          textStyle: {
            color: '#fff',
          },
          icon: 'rect',
          itemWidth: 10,
          itemHeight: 10,
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '23%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              // 坐标轴刻度
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff', // 修改为需要的颜色,
                width: 2,
              },
            },
            data: this.chartDate,
          },
        ],
        yAxis: [
          {
            type: 'value',
            // min: 5000,
            // interval: 5000,
            name: '(次)',
            nameTextStyle: {
              color: '#fff',
              // nameLocation: "start",
              align: 'right',
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              // 坐标轴刻度
              show: false,
            },
            splitLine: {
              // 坐标轴在 grid 区域中的分隔线
              lineStyle: {
                // 分隔线
                type: 'dashed', // 线的类型
                color: '#3C434F', // 分隔线颜色
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#E3F1FD',
              },
            },
          },
        ],
        series: this.chart2Series,
      };
      myChart.setOption(option);
    },
    async getQuantityData() {
      const { data } = await getQuantity();
      this.chartType = Object.keys(data);
      console.log(this.chartType, 9999);
      const result = Object.entries(data).map((item, index) => {
        return {
          name: item[0],
          type: 'line',
          smooth: true,
          lineStyle: {
            color: this.chartLineColor[index],
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.4,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                // color: 'rgba(170, 179, 193, .5)',
                color: `rgba(${this.chartColor[index]},.5)`,
              },
              {
                offset: 1,
                color: `rgba(${this.chartColor[index]},0)`,
              },
            ]),
          },
          data: item[1],
        };
      });
      console.log(result);
      this.chart1Series = result;
      this.chart1Init();
    },
    async getFrequenciesData() {
      const { data } = await getFrequencies();
      console.log('getFrequencies', data);
      const result = Object.entries(data).map((item, index) => {
        return {
          name: item[0],
          type: 'line',
          smooth: true,
          lineStyle: {
            color: this.chartLineColor[index],
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.4,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: `rgba(${this.chartColor[index]},.5)`,
              },
              {
                offset: 1,
                color: `rgba(${this.chartColor[index]},0)`,
              },
            ]),
          },
          data: item[1],
        };
      });
      console.log(result);
      this.chart2Series = result;
      this.chart2Init();
    },
    getDateSection() {
      // 定义开始和结束日期
      const startDate = moment().subtract(1, 'years');
      const endDate = moment();
      const dateArr = [];
      // 初始化当前日期
      let currentDate = startDate.clone();

      // 循环直到结束日期
      while (currentDate.isBefore(endDate)) {
        dateArr.push(currentDate.format('MM'));
        currentDate.add(1, 'months'); // 将当前日期增加一个月
      }
      const result = dateArr.map((item) => {
        if (item < 10) {
          return `${item.replace(0, '')}月`;
        }
        return `${item}月`;
      });
      this.chartDate = result;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  height: 100%;
  width: 100%;
  background-image: url('~@/assets/bj.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.timeBox {
  margin-left: 100px;
  line-height: 72px;
}
.timeIcon {
  width: 29px;
  height: 28px;
  line-height: 70px;
  display: inline-block;
}
.title {
  height: 70px;
  // background-color: skyblue;
  background-image: url('~@/assets/top_bj.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  .titleLeft {
    flex: 1;
  }
  .titleMain {
    flex: 1;
    text-align: center;
    line-height: 70px;
    font-family: PangMenZhengDao;
    font-size: 42px;
    letter-spacing: 6px;
    text-align: center;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, #2fa3ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .titleRight {
    flex: 1;
    display: flex;
  }
  .titleBg {
    width: 100%;
    height: 60px;
  }
}
.main {
  display: flex;
  height: 100%;
  width: 100%;
  .left_content {
    width: 23vw;
    height: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    padding-left: 24px;
    .lefttitle {
      border-bottom: 1px solid #474d5d;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        i {
          height: 32px;
          width: 15px;
          display: flex;
          align-items: center;
          .blue {
            width: 3px;
            height: 32px;
            background-color: #2fa3ff;
          }
          .blue-transparent {
            width: 12px;
            height: 32px;
            background: rgba(47, 163, 255, 0.16);
          }
        }
        span {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          margin-left: 10px;
        }
      }
      .right {
        position: relative;
        width: 6px;
        height: 6px;
        background-color: #2fa3ff;
        border-radius: 50%;
      }

      .right::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        width: 12px;
        height: 12px;
        background-color: #2fa3ff;
        border-radius: 50%;
        opacity: 0;
        animation: expand 1s linear infinite;
      }

      @keyframes expand {
        0% {
          opacity: 0;
          transform: scale(0);
        }
        50% {
          opacity: 0.5;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(2);
        }
      }
    }
  }
  .content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 60px;
    padding-right: 60px;
    box-sizing: border-box;
    .map {
      width: 100%;
      height: 100%;
    }
    .line_chart {
      height: 400px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      .module1 {
        width: 48%;
        height: 100%;
        display: flex;
        flex-direction: column;
        // background: red;
        .module1_title {
          height: 32px;
          align-items: center;
          justify-content: space-between;
          display: flex;
          padding-right: 16px;
          font-weight: bold;
          font-size: 16px;
          color: #fff;
          border-bottom: 1px solid #474d5d;
          .left {
            display: flex;
            align-items: center;
            i {
              height: 32px;
              width: 15px;
              display: flex;
              align-items: center;
              .blue {
                width: 3px;
                height: 32px;
                background-color: #2fa3ff;
              }
              .blue-transparent {
                width: 12px;
                height: 32px;
                background: rgba(47, 163, 255, 0.16);
              }
            }
            span {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 16px;
              color: #ffffff;
              margin-left: 10px;
            }
          }
          .right {
            position: relative;
            width: 6px;
            height: 6px;
            background-color: #2fa3ff;
            border-radius: 50%;
          }

          .right::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            width: 12px;
            height: 12px;
            background-color: #2fa3ff;
            border-radius: 50%;
            opacity: 0;
            animation: expand 1s linear infinite;
          }

          @keyframes expand {
            0% {
              opacity: 0;
              transform: scale(0);
            }
            50% {
              opacity: 0.5;
              transform: scale(1);
            }
            100% {
              opacity: 0;
              transform: scale(2);
            }
          }
        }
        #chart1 {
          width: 100%;
          height: 350px;
          // flex: 1;
          // height: 100%;
        }
        #chart2 {
          width: 100%;
          height: 350px;
          // flex: 1;
          // height: 100%;
        }
      }
      .module2 {
        width: 50%;
        height: 100%;
        background: blue;
      }

      // #chart2 {
      //   width: 50%;
      //   height: 100%;
      // }
    }
    // background-color: gray;
  }
  .right_echarts {
    width: 23vw;
    height: 100%;
    padding-right: 24px;
    // background-color: aquamarine;
  }
  .tableBoxChild {
    height: calc((100vh - 220px) / 3 - 40px);
    overflow: auto;
  }
  #customType {
    width: 100%;
    height: calc((100vh - 220px) / 3 - 40px);
  }
  .lefttitle {
    // background-image: url('~@/assets/titlebg.png');
    // background-repeat: no-repeat;
    // background-size: 100%;
    color: #fff;
    font-size: 16px;
    width: 100%;
    height: 33px;
    line-height: 33px;
    margin: 20px 0;
    font-weight: bold;
  }
}

#city {
  width: 100%;
  height: 100%;
  // height: 600px;
}
.timeNum {
  font-family: Helvetica;
  font-size: 20px;
  color: #e3f1fd;
  line-height: 56px;
  margin-left: 30px;
}

::v-deep .el-table .el-table__row td {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #c1c9d8 !important;
  font-style: normal;
  text-transform: none;
}
</style>
